<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/WEB-INF/jsp/common/meta.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加信息</title>
</head>
<body>
    <input id="modeValue" type="hidden" value="${modeValue}"/>
    <div class="easyui-layout" fit=true id="addInfo_layout">
        <div data-options="region:'center',border:false"
            style="padding: 0px;">
            <div class="block_title">
			    <center>
		            <span style="color:red;font-size:12px;">个人信息（测试主、从表数据的提交）</span>	
		        </center>
		    </div>
		    <form id="complexData_form" class="hgform">
                <div class="block_title">
		            <span style="color:#3289E8;font-size:12px;">基本信息</span>	
		            <em><a onclick="javascript:HgUi.hideShowSearch(this);" class="slide_up"></a></em>
		        </div>
				<table style="height:auto;width:100%;margin-bottom:10px;" cellpadding="0" cellspacing="0" 
				       id="personInfo_table" class="hgtable">
				    <colgroup>
					    <col style="width: 80px;" />
					    <col style="width: 200px;" />
						<col style="width: 80px;" />
						<col style="width: 200px;" />
						<col style="width: 80px;" />
						<col />
				    </colgroup>
				    <tr style="line-height:30px;">
				        <td align="right"><font>*</font>姓名：</td>
			            <td><input id="user_name" name="name" > </td>
			            <td align="right"><font>*</font>性别：</td>
			            <td>
			                <select id="user_sex" name="sex" class="easyui-combobox" 
			                  style="width: 50px;" panelHeight="auto" editable="false">
			                    <option value="0" selected="selected">男</option>
			                    <option value="1">女</option>
		                    </select>
			            </td>
			            <td align="right"><font>*</font>电话：</td>
			            <td><input id="user_tel" name="tel" ></td>
				    </tr>
				    <tr style="line-height:30px;">
				         <td align="right"><font>*</font>家庭住址：</td>
			             <td><input id="user_address" name="address" ></td>
			             <td align="right"><font>*</font>父亲：</td>
			             <td><input id="fatherName" name="fatherName"></td>
			             <td align="right"><font>*</font>母亲：</td>
			             <td><input id="matherName" name="matherName"></td>
				    </tr>
				</table>
                <div class="block_title">
		    		<span style="color:#3289E8;font-size:12px;">教育信息</span>	
		            <em><a onclick="javascript:HgUi.hideShowSearch(this);" class="slide_up"></a></em>
		        </div>
            	<table singleSelect=true style="height:250px;width:100%;" id="complexData_table" 
            	    fitColumns=true toolbar="#complex_toolbar" 
            	    data-options="scrollbarSize:0,rownumbers:true,
		                onClickRow: onClickRow">
                	<thead>
                		<tr>
                    		<th data-options="field:'year',width:200"
                                editor="{type:'textbox',options:{required:true,missingMessage:'此输入项为必填项',validType:['length[1,120]']}}">年份</th>
                    		<th data-options="field:'school',width:200"
                                editor="{type:'textbox',options:{required:true,missingMessage:'此输入项为必填项',validType:['length[1,120]']}}">学校</th>
                   			<th data-options="field:'remarks',width:200"
                                editor="{type:'textbox'}">备注</th>
                    	</tr>
               	    </thead>
            	</table>
                <div id="complex_toolbar" tag=listen_hotkey>
                	<table>
                    	<tr>
                        	<td><a href="javascript:void(0)" class="easyui-linkbutton"
                            	iconCls="icon_add1" plain="true" tag="add" id="addSchool">新建</a></td>
                            <td><a href="javascript:void(0)" class="easyui-linkbutton"
                                iconCls="icon_save1" plain="true" tag="save" id="saveSchool">保存</a></td>
                        	<td><a href="javascript:void(0)" class="easyui-linkbutton"
                            	iconCls="icon_delete" plain="true" tag="del" id="delSchool">删除</a></td>
                        	<td><a href="javascript:void(0)" class="easyui-linkbutton"
                            	data-options="iconCls:'icon_undo',plain:true" tag="undo" id="undoSchool">撤销</a></td>
                        	</td>
                    	</tr>
               	    </table>
            	</div>
            </form>
            <div data-options="region:'south',border:false" style="text-align: right; padding: 5px 5px 5px; background-color: #e0e0e0;">
                <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" tag="ok" id="complexData_submit">主从表数据测试提交</a>
            </div>
        </div>
    </div>
	<script type="text/javascript">
	var complexDataGrid = new HgUi.Datagrid("complexData_table");
	complexDataGrid.init();
	//-------------------------------------------------------------------------------------------------------
    var dataInfo = [];//全局变量：保存动态添加行的数据信息
	var testParam = "testValue";//全局变量：restful风格的url参数，可根据实际业务需求赋值
	var editIndex = undefined;//编辑行索引
	//-------------------------------页面加载完成时，装入token----------------------------------------------------------
	$(function(){
		HgUtil.initSubmitToken("#complexData_form");
	});
	//-------------------------------------结束行编辑--------------------------------------------------------------
	function endEditing(){
		if (editIndex == undefined){return true}
		if ($('#complexData_table').datagrid('validateRow', editIndex)){
			$('#complexData_table').datagrid('endEdit', editIndex);
			editIndex = undefined;
			return true;
		} else {
			return false;
		}
	}
	//--------------------------------------点击行-----------------------------------------------------------------
	function onClickRow(index){
		if (editIndex != index){
			if (endEditing()){
				$('#complexData_table').datagrid('selectRow', index)
						.datagrid('beginEdit', index);
				editIndex = index;
			} else {
				$('#complexData_table').datagrid('selectRow', editIndex);
			}
		}
	}
	//---------------------------添加---------------------------------------------------------------------
	$("#addSchool").click(function() {
		if (endEditing()){
			$('#complexData_table').datagrid('appendRow',{
				year:'',
				school:''
			});
			editIndex = $('#complexData_table').datagrid('getRows').length-1;
			$('#complexData_table').datagrid('selectRow', editIndex)
					.datagrid('beginEdit', editIndex);
		}
	});
	// --------------------------保存数据------------------------------------------------------------------
	$("#saveSchool").click(function() {
		if (endEditing()){
		    $('#complexData_table').datagrid('acceptChanges');//临时测试使用
		}
	});
	//----------------------------删除---------------------------------------------------------------------
	$("#delSchool").click(function() {
		if (editIndex == undefined){return}
				$('#complexData_table').datagrid('cancelEdit', editIndex)
						.datagrid('deleteRow', editIndex);
				editIndex = undefined;
	});
	//-----------------------------撤销--------------------------------------------------------------------
	$("#undoSchool").click(function() {
		$('#complexData_table').datagrid('rejectChanges');
		editIndex = undefined;
	});
	//-------------------------------提交------------------------------------------------------------------
	$("#complexData_submit").click(function() {
		//校验主表数据
		if(!$('#complexData_form').validate().form()){
			return false;
		}
		var rows = $("#complexData_table").datagrid("getRows");//获取所有行信息 
		//校验从表数据
		if(rows.length == 0){
			$.messager.alert("提示","请添加教育经历！","warning");
			return false;
		}
		var modeValue = $('#modeValue').val();//是否使用@RequestBody（0 ：使用；1：不使用）
    	var testParam = "testValue";
    	var submitToken = $("#complexData_form").find("#submitToken").val();//获取页面加载完成时装入的token值
    	var schoolList = [];
    	for(var i=0;i<rows.length;i++){
    		schoolList.push({"year":rows[i].year,"school":rows[i].school});
    	}
    	var submitData = {};
    	if(modeValue == 0){//---------------------------使用@RequestBody--------------------------------------
    		var family = {"fatherName":$("#fatherName").val(),"matherName":$("#matherName").val()};
    		submitData = {"name":$("#user_name").val(),"sex":$("#user_sex").combobox('getText'),
    				      "tel":$("#user_tel").val(),"address":$("#user_address").val(),
    				      "family":family,"schoolList":schoolList};
        	var submitUrl = "/common/demo/requestBody/addComplex_useRequestBody/"+testParam;
        	HgUtil.postByJson(submitUrl,submitData,submitToken,function(data){
        		if(data.success){
		    		HgUi.ok('模拟测试复杂数据成功！返回的数据为'+data.data, function(){
						//TODO
		    			$("#addInfo_layout").parent().window("close");
					})
	    		}else{
	    			HgUi.error('模拟测试复杂数据失败！',function(){
	    				HgUtil.initSubmitToken("#complexData_form");
	    				//TODO
					});
	    		}
        	},null);
    	}else if(modeValue == 1){//---------------------------不使用@RequestBody--------------------------------------
    		submitData = {"name":$("#user_name").val(),"sex":$("#user_sex").val(),
				         "tel":$("#user_tel").val(),"address":$("#user_address").val(),
				         "fatherName":$("#fatherName").val(),"matherName":$("#matherName").val()};
    		submitData.schoolList = JSON.stringify(rows);
    		var submitUrl = "/common/demo/requestBody/addComplex_noUseRequestBody/"+testParam;
    		HgUtil.postForToken(submitUrl,submitData,submitToken,function(data){
            	if(data.success){
		    		HgUi.ok('模拟测试多条数据成功！返回的数据为'+data.data, function(){
						//TODO
		    			$("#addInfo_layout").parent().window("close");
					})
	    		}else{
	    			HgUi.error('模拟测试多条数据失败！',function(){
	    				HgUtil.initSubmitToken("#complexData_form");
	    				//TODO
					});
	    		}
            },null);
    	}
	});
	//------------------------------校验--------------------------------------------------------------
	$('#complexData_form').validate({
		rules: { 
			name : {required: true},
			tel : {required: true,mobile: true},
			address :{required: true},
			fatherName :{required: true},
			matherName :{required: true}
		}
	});
    </script>
</body>
</html>